const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 模式
    mode: 'development',

    // 入口  多个
    entry: {
        base: './src/base.js',
        login: './src/pages/login/index.js',
        userAdd: './src/pages/userAdd/index.js',
        users: './src/pages/users/index.js',
        userUpdate: './src/pages/userUpdate/index.js'
    },

    // 输出
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有打包文件所在的根目录
        filename: 'js/[name]_[contenthash:8].js', // 打包生成的js文件 (可以带目录)
        clean: true // 打包时, 先自动清除打包文件夹
    },

    plugins: [
        // 创建打包页面的多个plugin

        new HtmlWebpackPlugin({
            template: './src/pages/login/index.html', // 指定模板文件。
            filename: 'login.html', // 生成的打包页面文件名
            chunks: ['base', 'login'], // 引入的js包名
            inject: 'body' // 将打包生成的JS文件放置在body尾部
        }),
        new HtmlWebpackPlugin({
            template: './src/pages/userAdd/index.html',
            filename: 'userAdd.html',
            chunks: ['base', 'userAdd'],
            inject: 'body'
        }),
        new HtmlWebpackPlugin({
            template: './src/pages/users/index.html',
            filename: 'users.html',
            chunks: ['base', 'users'],
            inject: 'body'
        }),
        new HtmlWebpackPlugin({
            template: './src/pages/userUpdate/index.html',
            filename: 'userUpdate.html',
            chunks: ['base', 'userUpdate'],
            inject: 'body'
        }),
        new HtmlWebpackPlugin({
            template: './src/pages/index/index.html',
            filename: 'index.html',
            chunks: [],
            inject: 'body'
        })
    ],

    module: {
        rules: [
            {
                // 处理js文件
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: { version: 2 } }]],
                        plugins: []
                    }
                }
            },
            // 处理css文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 处理art-template模板文件
            {
                test: /\.art$/,
                use: ['art-template-loader']
            }
        ]
    },

    // 开发服务器
    devServer: {
        port: 3000, // 端口号
        open: true // 自动打开浏览器
    }
}
